<template>
  <div v-show="closeSearch">
    <div class="selectBox">

      <ul>
        <li @click="handleSelect(item)" v-for="(item,index) in searchData" :key="index">
          {{item.name}}
        </li>
      </ul>

    </div>
  </div>
</template>

<script>
export default {
  props: {
    searchData: {
      type: Array,
      default: [],
    },

    closeSearch: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {};
  },

  methods: {
    handleSelect(item) {
      this.$emit("handleSelect", item);
    },
  },
};
</script>

<style lang="less" scoped>
.selectBox {
  width: 200px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 1000;
  box-shadow: 2px 0px 10px 2px #ccc;
  ul {
    list-style: none;

    li {
      height: 30px;
      display: flex;
      align-items: center;
      padding-left: 20px;
      box-sizing: border-box;
    }
  }
}
</style>